<template>
	<view class="content">
		<view class="tab-top">
			<view class="van-tabs__nav van-hairline--top-bottom">
				<view class="van-tab" :class="{ 'van-tab--active': active === 1 }" @tap="tapTab(1)">正常合约</view>
				<view class="van-tab" :class="{ 'van-tab--active': active === -1 }" @tap="tapTab(-1)">到期合约</view>
			</view>
			<view class="my-tab" id="home">
				<view class="my-tab1">
					<view class="my-tab-total-l">
						<view>合约数</view>
						<view class="total">
							{{ machinesum.sum1 }}
							<text>个</text>
						</view>
					</view>
					<view class="my-tab-total-r">
						<view>总收益</view>
						<view class="total">
							{{ machinesum.sum2 }}
							<text>BHT</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 280upx;"></view>
		<view class="mykj-tab1">
			<block v-for="(item, index) in myMineList" :key="index">
				<view class="mykj-tab1-1" @click="goDetails(item)" v-if="item.state === active">
					<view class="item-l">
						<view class="img"><image src="/static/trbac.png" mode="aspectFit"></image></view>
						<view class="info">
							<view class="info-title">{{ item.name }}</view>
							<view>{{ item.price || 0 }}BHT</view>
						</view>
					</view>
					<view class="item-r">
						<view class="item">
							合约时间：
							<text>{{item.cid==1?'30天':'200天'}}</text>
						</view>
						<text class="item">
							总&nbsp;&nbsp;产&nbsp;量：
							<text>{{ item.totalPrice || 0 }}</text>
						</text>
						<view class="item">
							每天产量：
							<text>{{ item.dayPrice || 0 }}</text>
						</view>
						<view class="item">
							剩余产量：
							<text>{{ item.lnums || 0 }}</text>
						</view>
					</view>
				</view>
			</block>
			<loadding-more :loadEnd="loadEnd"></loadding-more>
		</view>
		<view class="mkj-lq"><button class="base-btn" @tap="getMyMine">一键领取</button></view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import LoaddingMore from '../../components/loadding-more.vue'
export default {
	components: {
		LoaddingMore
	},
	data() {
		return {
			active: 1,
			loading: false,
			myMineList: [],
			loadEnd: true,
			machinesum: {
				sum1: 0,
				sum2: 0
			},
		};
	},
	onShow() {
		this.myMine();
	},
	methods: {
		...mapActions([
			'setMachineDetails'
		]),
		tapTab(e) {
			this.active = e;
		},
		getMyMine() {
			if (this.loading) return;
			uni.showLoading({
				title: '领取中...'
			});
			this.loading = true;
			this.$http.getMyMine().then(res => {
				const data = res.data;
				uni.hideLoading();
				this.loading = false;
				if (data.success) {
					uni.showModal({
						title: '领取成功',
						content: `获得${data.data}个BHT!`,
						showCancel: false,
						success: res => {
							if (res.confirm) {
								this.myMine()
							}
						}
					});
					return;
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			});
		},
		myMine() {
			this.$http
				.myMine()
				.then(res => {
					const data = res.data;
					uni.stopPullDownRefresh();
					if (data.success) {
						this.myMineList = data.data.list;
						this.machinesum.sum1 = data.data.list.length || 0;
						this.machinesum.sum2 = data.data.rmb;
						return;
					}
					uni.showToast({
						title: data.errMsg,
						icon: 'none'
					});
			});
		},
		goDetails (item) {
			this.setMachineDetails(item)
			uni.navigateTo({
				url: '/pages/machine/details'
			})
		}
	},
	onPullDownRefresh() {
		this.myMine();
	}
};
</script>

<style scoped lang="scss">
.my-tab1 {
	width: 100%;
	display: flex;
	justify-content: space-around;
	border-bottom: #eeeeee;
	box-shadow: 0 5rpx 15rpx 0 rgba(0, 0, 0, 0.1);
}
.my-tab {
	display: flex;
	font-size: 32upx;
	color: #ababab;
	&-total-l,
	&-total-r {
		width: 50%;
		height: 100upx;
		padding: 20upx 0;
		text-align: center;
		background: #ffffff;
		padding-top: 34upx;
		color: #ababab;
		.total {
			margin-top: 10upx;
			font-size: 38upx;
			font-weight: 500;
			color: #3e527e;
			text {
				font-size: 32upx;
				font-weight: 400;
				color: #ababab;
			}
		}
	}
}

.mykj-tab1-1 {
	padding: 20upx;
	font-size: 30upx;
	border-radius: 20upx;
	background: #ffffff;
	margin-top: 20upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.mykj-tab1 {
	padding: 20upx;
	padding-bottom: 140upx;
	padding-top: 0;
	.item-l {
		display: flex;
		flex: 1;
		align-items: center;
		font-size: 30upx;
		text-align: center;
		color: #ababab;
		.img {
			width: 140upx;
			height: 140upx;
			overflow: hidden;
		}
		.info {
			margin-left: 10upx;
			&-title {
				margin-bottom: 20upx;
				font-size: 38upx;
				color: #000;
			}
		}
	}
}
.mkj-lq {
	text-align: center;
	position: fixed;
	left: 60upx;
	right: 60upx;
	bottom: 30upx;
	z-index: 9;
}
.tab-top {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9;
	background-color: #fff;
}
.van-tabs__nav {
	display: flex;
	background-color: #fff;
	user-select: none;
	.van-tab {
		position: relative;
		padding: 0 10upx;
		font-size: 28upx;
		line-height: 98upx;
		color: #7d7e80;
		text-align: center;
		cursor: pointer;
		background-color: #fff;
		box-sizing: border-box;
		-webkit-flex: 1;
		flex: 1;
		&.van-tab--active {
			position: relative;
			font-size: 500;
			color: #3e527e;
		}
		&.van-tab--active:after {
			content: '';
			width: 200upx;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 1;
			height: 3px;
			background-color: #3e527e;
			border-radius: 3px;
		}
	}
}
</style>
